<template>
  <view>
    <nav-bar :page-title="lang.pageName"/>
    <view class="column">

      <view class="text-34 content" style="gap: 50rpx">
        <view class="flex-column store-card">
          <!-- 商家名称和settings-->
          <view class="flex-between" style="align-items: flex-start">
            <view style="font-size: 46rpx">{{ userInfo.store.name }}</view>
            <!-- settings icon-->
            <navigator :url="`/pages/store/update_info?store=${encodeURIComponent(JSON.stringify(userInfo.store))}`"
                       hover-class="hover">
              <u-icon name="setting-fill" color="#fff" size="54rpx"/>
            </navigator>
          </view>

          <view class="flex-column gap-20">
            <view class="flex-center">
              <u-icon name="phone" size="44rpx" color="#fff"/>
              <view class="flex-center gap-8">
                {{ userInfo.store.phone }}
              </view>
            </view>
            <view class="flex-center gap-8">
              <view style="align-self: flex-start;">
                <u-icon name="map" size="44rpx" color="#fff"/>
              </view>
              <view class="flex-center gap-8">
                {{ userInfo.store.address }}
              </view>
            </view>
          </view>
        </view>

        <!-- 退款记录和订单-->
        <view :class="['flex-center text-32 bg-white padding-30 radio-20', locale]"
              style="justify-content: space-around">
          <view class="flex-center gap-20" hover-class="hover">
            <u-icon name="order" :size="26"/>
            <view class="default-text">{{ lang.quickAccess['orderRecord'] }}</view>
          </view>

          <navigator url="/pages/store/order/refund_record" hover-class="hover" class="flex-center gap-20">
            <u-icon name="rmb-circle-fill" :size="26"/>
            <view class="default-text">{{ lang.quickAccess['refundRecord'] }}</view>
          </navigator>
        </view>


        <!-- 常用功能-->
        <view :class="['bg-white padding-30 radio-20', locale]">
          <view :class="['margin-bottom-20 common-title']">
            {{ lang.commonFunctions['title'] }}
          </view>
          <view class="flex-center wrap" style="row-gap: 30rpx">
            <view v-for="(item, index) in commonFunctions" :key="index" @click="navigator(item.path)"
                  style="width: 25%;" class="column-center gap-20" hover-class="hover">
              <image style="width: 90rpx; height: 90rpx;" :src="`/static/icon/store/${item.icon}.svg`"/>
              <view :class="['common-icon-text']">{{ lang.commonFunctions[item.title] }}</view>
            </view>
          </view>
        </view>


        <!-- 常用功能-->
        <!--        <view class="bg-white padding-30 radio-20">-->
        <!--          <view class="text-36" style="margin-bottom: 10rpx;">{{ lang.moreServices['title'] }}</view>-->
        <!--          <view class="flex-center wrap gap-30">-->
        <!--            <view v-for="(item, models) in help" :key="models">-->
        <!--              <view class="padding-20 column-center gap-8" hover-class="hover" style="padding: 18rpx">-->
        <!--                <u-icon :name="item.name" :size="34"/>-->
        <!--                <view>{{ lang.moreServices[item.title] }}</view>-->
        <!--              </view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </view>-->

      </view>
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/nav-bar/nav-bar.vue";
import {mapState} from "vuex";

export default {
  components: {NavBar},
  data() {
    return {
      commonFunctions: [
        {title: 'withdrawals', icon: 'withdrawals', path: `/pages/store/Income`},
        {title: 'printerManage', icon: 'printer', path: `/pages/store/printer/printer_list`},
      ],

      help: [
        {name: 'question-circle', title: 'faq', path: ``},
        {name: 'server-man', title: 'contact', path: ``},
        {name: 'bag', title: 'buyDevice', path: ``},
        {name: 'error-circle', title: 'other', path: ``}
      ]
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    lang() {
      return this.$t('storePages.storeIndex')
    },
  },
  methods: {
    navigator(path) {
      console.log("path =-=", path);
      if (path) {
        uni.navigateTo({url: path})
      } else {
        uni.$u.toast('暂无该功能')
      }
    }
  }
}
</script>

<style lang="scss">
.store-card {
  color: #FFFFFF;
  background-color: $u-primary;
  padding: 30rpx;
  border-radius: 12px;
  gap: 30rpx;

  &_title {
    color: #FFFFFF;
    font-size: $uni-font-size-title;
  }
}

.order {
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 30rpx;
  height: 70rpx;
}

.desc {
  font-size: $uni-font-size-lg
}

.title {
  color: $uni-color-title;
  font-size: $uni-font-size-lg;
}
</style>
